import { useUserStore, getUsersListFromApi,deleteUserFromApi,updateUserFromApi } from '@/store/user/useUserStore'
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Table, Modal, Input, message,Space } from "antd";
import { UserOutlined } from '@ant-design/icons';
const UsersRoles = () => {
    const columns = [
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
        },
        // 按钮
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space>
                    <Button type="link" onClick={() => editor(record)}>编辑</Button>
                    <Button type="link" onClick={() => deleteUser(record._id)}>删除</Button>
                    <Button type="link" onClick={() => view(record)}>查看</Button>
                    <Button type="link" onClick={() => assignUser()}>角色</Button>
                </Space>
            ),
        }
    ];
    const navigate = useNavigate();
    const usersList = useUserStore.getState().userList
    // 获取数据
    useEffect(() => {
        getUsersListFromApi()
    }, [])
    // 编辑
    const editor = (record) => {
        setEditorIsModalOpen(true)
        setUsername(record.username)
        setPassword(record.password)
        setEditorList(record)
    }
    // 编辑对话框
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const [editorList, setEditorList] = useState([])
    const [editorIsModalOpen, setEditorIsModalOpen] = useState(false);
    const editorHandleOk = () => {
        const id= editorList._id
        setEditorIsModalOpen(false);
        updateUserFromApi(id,username,password)
    }
    const editorHandleCancel = () => {
        setEditorIsModalOpen(false);
    }
    // 查看对话框
    const [viewIsModalOpen, setViewIsModalOpen] = useState(false);
    const [viewList, setViewList] = useState([])
    const view = (record) => {
        console.log(1);
        setViewIsModalOpen(true)
        setViewList(record)
    }
    const viewHandleOk = () => {
        setViewIsModalOpen(false);
    }
    const viewHandleCancel = () => {
        setViewIsModalOpen(false);
    }
    // 删除用户
    const deleteUser = (id) => {
        Modal.confirm({
            title: '确定删除吗？',
            onOk: () => {
                message.success('删除成功');
                deleteUserFromApi(id)
                getUsersListFromApi()
            },
            onCancel: () => {
            },
        })
    }
    // 分配角色
    const assignUser = (id) => {
        navigate(`/acl/assign/${id}`)
    }
    return <div className="">
        <Button type="primary" onClick={() => navigate('/acl/usersadd')}>添加用户</Button>
        <Table dataSource={usersList} columns={columns} />;
        <Modal title="编辑" open={editorIsModalOpen} onOk={editorHandleOk} onCancel={editorHandleCancel}>
            用户名:
            <Input size="large" placeholder="large size" value={username} onChange={(e)=>{
                setUsername(e.target.value)
            }} prefix={<UserOutlined />} />
            密码:
            <Input size="large" placeholder="large size" value={password} onChange={(e)=>{
                setPassword(e.target.value)
            }} prefix={<UserOutlined />} />
        </Modal>
        <Modal title="查看" open={viewIsModalOpen} onOk={viewHandleOk} onCancel={viewHandleCancel}>
            <p>用户名:{viewList.username}</p>
        </Modal>
    </div>
};
export default UsersRoles;